<template>
	<sysJk :label="'6.消防应急广播操作'" showBack :withoutTop="true" leftTime="180">
		<template v-slot:content>
			<view class="warp" id="warp" @touchmove.stop="()=>{}">
				<view class="taskTit" style="width:100%;text-align: left;font-size: 2.5vh;display: flex;align-items: center;justify-content: space-between;">
					<text>{{questionList[showQuestion-1]}}</text>  
					
					<template v-if="showQuestion==2">
						<image v-if="!takePhoneFlag" :src="requireUrl+'/static/image/jd/j3-1.png'" mode="heightFix" style="height:100%"></image>
						<image v-if="takePhoneFlag&&!result2" :src="requireUrl+'/static/image/jd/j3-2.png'" mode="heightFix" style="height:100%"></image>
						<image v-if="takePhoneFlag&&result2&&!checkedRadio" :src="requireUrl+'/static/image/jd/j3-3.png'" mode="heightFix" style="height:100%"></image>
						<image v-if="takePhoneFlag&&result2&&checkedRadio" :src="requireUrl+'/static/image/jd/j3-4.png'" mode="heightFix" style="height:100%"></image>
					</template>
					<template v-if="showQuestion==3">
						<image v-if="!audioPlayFlag&&!playFlag" :src="requireUrl+'/static/image/jd/j2-0.png'" mode="heightFix" style="height:100%"></image>
						<image v-if="audioPlayFlag&&!playFlag" :src="requireUrl+'/static/image/jd/j2-2.png'" mode="heightFix" style="height:100%"></image>
						<image v-if="audioPlayFlag&&playFlag" :src="requireUrl+'/static/image/jd/j2-3.png'" mode="heightFix" style="height:100%"></image>
						
					</template>
				</view>
				<view class="innerContent" style="position:relative;width:100%;height:100%">
					<image :src="bUrl" style="width:100%;display: block;height:100%"></image>
					<view class="myCard" id="myCard">
						<view class="cardContent">
							
							<view class="handleBtn">
								<!-- <u-button color="#1E90FF	" custom-style="width:100rpx;height:30rpx;border-radius:10rpx;margin-right:10px" @tap="lastTask">上一题</u-button> -->
								<u-button :custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'green',color:'#fff',fontSize:'3vh'}" v-if="examType==1" @click="showFlag=true">查看解析</u-button>								<!-- <u-button color="#1E90FF	" custom-style="width:100rpx;height:30rpx;border-radius:10rpx;margin-right:10px" @tap="nextTask">下一题</u-button> -->
							</view>
							<view class="btnArea">
								<u-button :custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'#1E90FF',color:'#fff',fontSize:'3vh'}" @click="handleData">提交</u-button>
								<u-button :custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'#1E90FF',color:'#fff',fontSize:'3vh'}" @click="redo">重做</u-button>
								<u-button :custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'#1E90FF',color:'#fff',fontSize:'3vh'}" @click="goBack">返回</u-button>
							</view>
							<view class="closedLight" v-if="lightOn&&(showQuestion==1&&picIndex==2)" :style="{borderRadius:'50%',left:955*widthBl+'px',top:515*heightBl+'px',width:20*widthBl+'px',height:20*heightBl+'px',background:'black',position:'absolute'}">
								
							</view>
							<view class="timeBox" v-if="picIndex==2||picIndex==3||picIndex==4||picIndex==5" :style="{color:'#000',padding:10*widthBl+'px',fontSize:'1.5vh',borderRadius:'50%',left:1165*widthBl+'px',top:110*heightBl+'px',width:180*widthBl+'px',height:115*heightBl+'px',position:'absolute'}">
								<view class="">
									日期 {{showDate}}
								</view>
								<view class="">
									时间	{{changedTime}}
								</view>
								<view class="">
									系统运行正常
								</view>
							</view>
							<view class="timeBox" v-if="(picIndex==3&&checkedRadio&&result2)||picIndex==4||(picIndex==5&&playFlag)" :style="{color:'#000',padding:10*widthBl+'px',left:705*widthBl+'px',top:460*heightBl+'px',width:100*widthBl+'px',height:40*heightBl+'px',position:'absolute'}">
								{{secondsNum}}
							</view>
							<view class="writeBox" id="writeBox" :style="{left:writeBoxLeft,top:writeBoxTop}" @tap="showDialog" v-if="picIndex==1">
								<image src="https://www.xfzsb.com/static/image/open.png" mode="widthFix" style="width:20px"></image>
							</view>
							<view class="writeBox" id="closeBox" :style="{right:30*widthBl+'px',top:30*heightBl+'px'}"  v-if="picIndex==2||picIndex==3||picIndex==4||picIndex==5">
								<image src="https://www.xfzsb.com/static/image/close.png" mode="widthFix" style="width:20px" @tap="back1"></image>
							</view>
							<view class="writeBox" id="callBox" :style="{left:425*widthBl+'px',top:490*heightBl+'px',width:100*widthBl+'px',height:140*heightBl+'px'}" @tap="takePhone" v-if="picIndex==2&&showQuestion==2">
								
							</view>
							<view class="writeBox" id="recordBox" :style="{left:795*widthBl+'px',top:690*heightBl+'px',width:45*widthBl+'px',height:90*heightBl+'px'}" @tap="luzhi" v-if="picIndex==3&&showQuestion==2">
								
							</view>
							
							<view class="writeBox" id="playBtn" :style="{left:735*widthBl+'px',top:690*heightBl+'px',width:45*widthBl+'px',height:90*heightBl+'px'}" @tap="playAudio" v-if="picIndex==2&&showQuestion==3">
								
							</view>
							<view class="writeBox" :style="{left:755*widthBl+'px',top:700*heightBl+'px',width:widthBl*10+'px',height:10*heightBl+'px',borderRadius:'50%',background:'red'}"  v-if="(picIndex==2||picIndex==5)&&showQuestion==3&&audioPlayFlag">
							
							</view>
							<view class="writeBox" id="audioCon" :style="{left:1120*widthBl+'px',top:465*heightBl+'px',width:25*widthBl+'px',height:25*heightBl+'px'}" @tap="chooseOk" v-if="picIndex==2&&showQuestion==3&&audioPlayFlag">
								
							</view>
							<view class="writeBox" :style="{left:1060*widthBl+'px',top:460*heightBl+'px',width:widthBl*10+'px',height:10*heightBl+'px',borderRadius:'50%',background:'green'}"  v-if="picIndex==5&&showQuestion==3&&audioPlayFlag">
							
							</view>
							<view class="answerBox" v-if="showQuestion==1" :style="{width:345*widthBl-35+'px'}">
								<view class="answerTit">
									请选择消防应急广播的工作状态
								</view>
								<view class="answerSelect">
									
									<radio-group @change="onChange" >
													<label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value" style="display: flex;margin-bottom: 5px;align-items: center;">
														<view>
															<radio :value="item.value" :checked="result==item.value" :style="{transform:'scale('+heightBl+')'}"/>
														</view>
														<view>{{item.name}}</view>
													</label>
									</radio-group>
								</view>
							</view>
							<view class="answerBox" v-if="showQuestion==2&&result2&&picIndex==3&&!checkedRadio" :style="{width:345*widthBl-35+'px'}">
								<view class="answerTit">
									请选择音频文件
								</view>
								<view class="answerSelect">
									
									<radio-group @change="selectRadio" >
													<label class="uni-list-cell uni-list-cell-pd"  style="display: flex;margin-bottom: 5px;align-items: center;">
														<view>
															<radio value="音频文件" :checked="checkedRadio" :style="{transform:'scale('+heightBl+')'}"/>
														</view>
														<view>音频文件</view>
													</label>
									</radio-group>
								</view>
							</view>
						</view>
					</view>
					
				</view>
				
				<u-mask :show="showFlag" @click="onClickHide">
				  <view class="wrapper" style="display: flex;align-items: center;justify-content: center;height:100%">
				    <view class="block" style="width:400rpx;padding: 20rpx;box-sizing:border-box;background: #fff;font-size:2vh">
				    	<view class="overtitle">
				    		【试题解析】 正确答案
				    	</view>
				    	<view class="overtitle">
				    		{{analysList[showQuestion-1]}}
				    	</view>
						<view class="overtitle" v-if="showQuestion==1">
							正确答案：功放故障状态
						</view>
				    </view>
				  </view>
				</u-mask>
			</view>

		</template>
	</sysJk>

</template>

<script>
	import sysJk from '@/components/sysJk.vue'
	import {fzQuestion} from '@/globalApi/requestApi.js'
	import {formatTime,duringTime} from '@/util/index.js'
	const app = getApp();
	const baseUrl = app.globalData.requestUrl;
	export default {
		components: {
			sysJk
		},
		
		data() {
			
				
			return {
				// widthBl:0,
				// heightBl:0,
				allScore:0,
				secondsNum:"00:00",
				formatTime,
				duringTime,
				examType:1,
				writeBox:{width:0,height:0},
				writeBoxLeft:0,
				writeBoxTop:0,
				widthBl:0,
				heightBl:0,
				picIndex:1,
				showFlag:false,
				checkedRadio:false,
				audioPlayFlag:false,	
				bUrl:baseUrl+"/static/image/jk/11-1.jpg",
				questionList:[
					'【1/3】请判断消防应急广播的工作状态',
					'【2/3】请通过话筒录制疏散指令音频文件',
					'【3/3】请通过消防应急广播播放疏散指令音频文件 (疏散地址分区1)',
				],
				showQuestion:1,
				lightOn:false,
				items:[
					{
						value:"正常工作状态",
						checked:false,
						name:"正常工作状态",
					},
					{
						value:"功放故障状态", 
						checked:false,
						name:"功放故障状态",
					},
					
					
				],
				requireUrl:baseUrl,
				takePhoneFlag :false,
				result2:false,
				result:'',
				analysList:[
					'功放故障灯亮即为故障状态',
					'题目考录音，拿话筒，点录制，导入文件',
					'对1分区进行广播播放，点应急广播，选择1分区',
					
				],
				playFlag:false,
				isCorrect:true,
				showDate:null,
				changedTime:null,
				secondsTimer:null,
				innerAudioContext:null
			}
		},
		onLoad(options){
			this.examType = options.examType
			// var writeBox = uni.createSelectorQuery().in(this).select('#warp')
			// writeBox.boundingClientRect(data => {
			// this.writeBox = data
			// }).exec()
		},
		onShow() {
			let that = this
			setInterval(function(){
				that.lightOn = !that.lightOn
			},500)
			this.createTime()
		},
		onReady() {
				this.drawWhiteBox()
		},
		beforeDestroy() {
			if(this.innerAudioContext){
				this.innerAudioContext.stop()
			}
		},
		methods: {
			createTime(){
				// this.showTime=this.formatTime(new Date(),'yy/MM/dd HH:mm:ss')
				let that = this
				// this.showTime = this.formatTime(new Date(),'HH:mm')
				setInterval(function(){
						that.showDate = that.formatTime(new Date(),'yy/MM/dd')
						that.changedTime = that.formatTime(new Date(),'HH:mm:ss')
				},1000)
			},
			redo(){
				if(this.showQuestion==1){
					this.result=null
					this.picIndex=1
					this.bUrl=baseUrl+"/static/image/jk/11-1.jpg"
				}else if(this.showQuestion==2){
					this.picIndex=1
					this.bUrl=baseUrl+"/static/image/jk/11-1.jpg"
					this.takePhoneFlag  = false
					this.result2 = false
					clearInterval(this.secondsTimer)
					this.secondsTimer=null
					this.secondsNum = '00:00'
					this.checkedRadio = false
				}else if(this.showQuestion==3){
					this.picIndex=1
					this.bUrl=baseUrl+"/static/image/jk/11-1.jpg"
					this.playFlag=false
					this.audioPlayFlag = false
					clearInterval(this.secondsTimer)
					this.secondsTimer=null
					this.secondsNum = '00:00'
					this.innerAudioContext.stop()
					this.innerAudioContext = null
					
				}
			},
			back1(){
				this.picIndex=1
				this.bUrl = baseUrl+"/static/image/jk/11-1.jpg"
			},
			goBack(){
				uni.navigateBack()
			},
			chooseOk(){
				this.bUrl = baseUrl+"/static/image/jk/11-4-4.jpg"
				this.picIndex=5
				this.playFlag = true
				let that = this
				if(this.secondsTimer){
					clearInterval(this.secondsTimer)
					this.secondsTimer = null
					this.secondsNum = '00:00'
				}
				var num = 1
				this.secondsTimer = setInterval(function(){
					that.secondsNum = ((Math.floor(num/60)).toString()).padStart(2, '0')+':'+((num%60).toString()).padStart(2, '0')
					num+=1
				},1000)
				this.createAudio()
			},
			playAudio(){
				this.audioPlayFlag = true
			},
			createAudio(){
				var that = this;
				that.innerAudioContext = uni.createInnerAudioContext();
				that.innerAudioContext.autoplay = true;//自动播放
				that.innerAudioContext.loop = false; //循环播放
				//只要音频路径是网络路径，基本上没啥问题了，本地路径好像就不行
				that.innerAudioContext.src =  app.globalData.imgUrl+'yy.MP3';
								
				that.innerAudioContext.volume = 0.8;
				that.innerAudioContext.onPlay(() => {//可以播放事件
					console.log('开始播放');
					// that.playing = !innerAudioContext.paused;//查看是否可以自动播放
				});
				that.innerAudioContext.onError((res) => {
					onsole.log(res.errMsg);
					console.log(res.errCode);
				});
			},
			selectRadio(e){
					if(e){
						let that = this
						this.bUrl = baseUrl+"/static/image/jk/11-4-3.jpg"
						this.picIndex==4
						this.checkedRadio = true
						var num = 1
						this.secondsTimer = setInterval(function(){
							that.secondsNum = ((Math.floor(num/60)).toString()).padStart(2, '0')+':'+((num%60).toString()).padStart(2, '0')
							num+=1
						},1000)
					}
			},
			luzhi(){
				this.result2 = true
			},
			takePhone(){
				this.takePhoneFlag=true
				this.bUrl = baseUrl+"/static/image/jk/11-4-2.jpg"
				this.picIndex=3
			},
			onChange(e){
				this.result = e.detail.value
			},
			handleData(){
				let that = this
				this.$showModal2({
					title: '确认提交？',
					// content: '这是一个模态弹窗',
					
				}).then(()=>{
					
							let handleData = {
							   fz_id:that.examId,
							   title:'自动喷水灭火系统电气控制柜操作',
							   no:'10-'+that.showQuestion,
							   question_type:1,
							   user_answer:that.result,
							   answer:'',
							   is_correct:that.isCorrect,
							   score:'',
							   start_time:'',
							   end_time:'',
							   question_answer:''
						   }
						   if(that.showQuestion==1){
							   if(!that.result){
								   uni.showToast({
									title:'请选择答案',
									icon:'none'
								   })
								   return
							   }
								if(that.result=='功放故障状态'){
									handleData.score = 2
									handleData.is_correct = true
								}else{
									handleData.score = 0
									handleData.is_correct = false
								}
								handleData.title = '请判断消防应急广播的工作状态'
						   }else if(that.showQuestion==2){
						   	if(that.checkedRadio){
						   		handleData.score = 0.5
								handleData.is_correct = true
						   	}else{
						   		handleData.score = 0
								handleData.is_correct = false
						   	}
						   	handleData.title = '请判断消防应急广播的工作状态'
						   }else if(that.showQuestion==3){
						   	if(that.playFlag){
						   		handleData.score = 0.5
								handleData.is_correct = true
						   	}else{
						   		handleData.score = 0
								handleData.is_correct = false
						   	}
						   	handleData.title = '请通过消防应急广播播放疏散指令音频文件（疏散地址分区1）'
						   }
						   fzQuestion(handleData).then(res=>{
							   if(res.code==200){
								   that.allScore+=handleData.score
								   if(that.showQuestion<3){
									   that.showQuestion+=1
									   that.bUrl=baseUrl+"/static/image/jk/11-1.jpg"
									   that.picIndex=1
								   }else{
									   let pages = getCurrentPages()
									   let prevPage = pages[pages.length -2] 
									   prevPage.$vm.status6 = true
									   prevPage.$vm.addScore(that.allScore)
									  uni.navigateBack()
								   }
							   }
						   })
						
									
				});
			},
			showDialog(){
				// this.showFlag = true
				if(this.showQuestion==2){
					if(!this.takePhoneFlag){
						this.bUrl = baseUrl+"/static/image/jk/11-2.jpg"
						this.picIndex=2
					}else{
						if(!this.checkedRadio){
							this.bUrl = baseUrl+"/static/image/jk/11-4-2.jpg"
							this.picIndex=3
						}else{
							this.bUrl = baseUrl+"/static/image/jk/11-4-3.jpg"
							this.picIndex=4
						}
						
					}
				}else if(this.showQuestion==3){
					if(this.playFlag){
						this.bUrl = baseUrl+"/static/image/jk/11-4-4.jpg"
						this.picIndex=5
					}else{
						this.bUrl = baseUrl+"/static/image/jk/11-2.jpg"
						this.picIndex=2
					}
					
				}
				
				
				else{
					this.bUrl = baseUrl+"/static/image/jk/11-2.jpg"
					this.picIndex=2
				}
				
			},
			onClickHide(){
				this.showFlag = false
			},
			drawWhiteBox(){
				let that = this
				var warp = uni.createSelectorQuery().in(this).select('#myCard') 
				warp.boundingClientRect(data => {
				 var widthBl = data.width/1920
					var heightBl = data.height/921
					this.widthBl=widthBl
					this.heightBl=heightBl
					this.writeBox.width = 100*widthBl+'px'
					this.writeBoxLeft = 990*widthBl+'px' 
					this.writeBoxTop = 400*heightBl+'px'
					this.writeBox.height = 100*heightBl+'px'
				}).exec()
			
				// uni.getSystemInfo({
				// 	success: function(res) {
				// 		console.log(res)
				// 		
						
				// 	}
				// });
			},
			nextTask(){
				uni.navigateTo({
					url:'../jkL/jkL'
				})
			},
			lastTask(){
				uni.navigateBack()
			}
		}
	}
</script>


<style scoped lang="scss">
	.warp {
		height: 100%;
		box-sizing: border-box;
		// padding: 22rpx 33rpx 38rpx 36rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		background: #F6F6F6;

		.myCard {
			width: 100%;
		   height:100%;
			position: absolute;
			// border-radius: 20rpx;
			// overflow: hidden;
			left:0;
			top:0;

			.cardContent {
				// padding: 52rpx 58rpx 37rpx;
				box-sizing: border-box;
				width: 100%;
				height: 100%;
				position: relative;
				color: #fff;

				.moneyContent {
					margin-top: 54rpx;
					width: 100%;
					display: flex;
					align-items: center;

					.moneyDetail {
						width: 50%;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: flex-start;

						.detailTit {
							font-size: 24rpx;
							font-weight: 400;
						}

						.detailVal {
							font-size: 55rpx;
							font-weight: bold;
							margin-top: 35rpx;
						}
					}

				}
				.taskTit{
					width:100%;
					text-align: left;
					background: #fff;
					color:#000
				}
				.handleBtn{
					position:fixed;
					left:30px;
					bottom:30px
				}
				.btnArea {
					margin-top: 160rpx;
					//margin-left: 150rpx;
					display: flex;
					justify-content: center;
					position:fixed;
					right:30px;
					bottom:30px
					// text-align: center;
				}
				.answerBox{
					position: absolute;
					left:35px;
					top:0%;
					background: #fff;
					color:#000;
					font-size:2vh;
					width:20%;
					.answerTit{
						background:orange
					}
				}
				.answerSelect{
					padding:10px 0;
					box-sizing: border-box;
				}
			}
		}

		.infoBox {
			width: 100%;
			padding: 14rpx 30rpx;
			margin-top: 33rpx;
			border-radius: 20rpx;
			box-sizing: border-box;
			background: #fff;

			.singleInfo {
				width: 100%;
				box-sizing: border-box;
				padding: 20rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1rpx solid #ccc;

				.info {
					flex: 1;

					.desc {
						font-size: 26rpx;
						font-weight: 400;
						color: #222222;
					}

					.time {
						margin-top: 15rpx;
						font-size: 18rpx;
						font-weight: 400;
						color: #888888;
						display: flex;
						align-items: center;
					}
				}

				.val {
					width: 115rpx;
					height: 40rpx;
					border: 1rpx solid #DA2627;
					border-radius: 40rpx;
					text-align: center;
					font-size: 22rpx;
					font-weight: 400;
					color: #DA2627;
					line-height: 40rpx;
				}
			}
		}
		.writeBox{
			// border:1px solid green;
			width:100px;
			height:100px;
			position:absolute;
			display: flex;
			align-items: center;
		}
	}
</style>